<template>
  <div class="circle-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-circle :percent="60"><span>项目1</span></d-circle>
      <d-circle :percent="99" color="#13CE66"><span>项目2</span></d-circle>
      <d-circle :percent="12" color="#E11617"><span>项目2</span></d-circle>
    </div>
    <h3>组合形式</h3>
    <div v-width="600">
      <p>
        <d-number-input v-model="value" :step="10" :min="0" :max="200" useOperate></d-number-input>
      </p>
      <p>
        <d-circle :percent="value" :stroke-width="18" :size="200">
          <p class="gray-color" v-font="28">122,332,98</p>
          <div v-height="5"></div>
          <p class="dark-color" v-font="13">目前达成比例</p>
          <p class="gray-color">
            <span class="primary-color" v-font="16">
              {{ parseInt(123*value/100) }}
            </span>/
            <span>123</span>
          </p>
        </d-circle>
        <d-circle :percent="value" :stroke-width="8" :size="80">
          <span v-font="12">占比：{{ value }}%</span>
        </d-circle>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'circleDemo',
  data () {
    return {
      value: 10
    }
  }
}
</script>

<style lang="stylus" scoped>
// .circle-demo
</style>
